<template>
    <div>
        <router-view></router-view>
    </div>
    <div class="tabar">
        <div @click="router.push('/home')">
            <p><BankOutlined /></p>
            <p>首页</p>
        </div>
        <div @click="router.push('/zhao')">
            <p><BankOutlined /></p>
            <p>找房</p>
        </div>
        <div @click="router.push('/zi')">
            <p><BankOutlined /></p>
            <p>咨询</p>
        </div>
        <div @click="router.push('/wo')">
            <p><BankOutlined /></p>
            <p>我的</p>
        </div>
    </div>
</template>

<script setup>
import { BankOutlined } from '@ant-design/icons-vue'
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
onMounted(()=>{
    router.push('/home')
})
</script>

<style scoped>
.tabar{
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1px solid rgb(224, 224, 224);
    background-color: white;
}
.tabar div{
    flex: 1;
    text-align: center;
    width: 25%;
}
.tabar div p{
    margin: 0;
}
</style>